Brand Essence
ATLAS Meridia is an experimental laboratory for AI tools, knowledge management systems, and creative technology solutions. The visual language balances intellectual authority with warmth and approachability.
Voice
Thoughtful, precise, curious. We explain complex ideas clearly without condescension. We're excited about discovery but measured in claims.
Visual Character
Editorial sophistication meets digital craft. Classic typography signals intellectual seriousness. Warm gold accents add life without flash. Generous whitespace lets ideas breathe.
Color System
A desaturated navy foundation with warm cream surfaces and amber-gold accents. The palette is deliberately muted — sophisticated without being cold.
Navy Scale
Primary backgrounds in dark mode. Desaturated with slight warmth to avoid feeling clinical.
Cream Scale
Primary backgrounds in light mode. Warm paper tones, not stark white.
Accent — Amber Gold
The signature accent. Use for interactive elements, emphasis, and brand moments. In light mode, use --accent-dark (#a87a3a) for small text to ensure contrast.
Dark Mode Text
Custom text colors for dark mode — softer than pure cream to reduce contrast and eye strain.
Typography
Four typefaces, each with a specific role. The combination of classical serifs and clean sans creates intellectual warmth.
Font Stack
Display Type
Cormorant Garamond at weight 300, with italics at weight 400. Use for headlines, hero sections, and pullquotes.
The Verification Problem
in the Age of Infinite
Body Type
Source Serif 4 at 22px (--text-body) with 1.65 line height. Variable font with optical sizing. In dark mode, use weight 300 with +0.01em letter-spacing.
We're entering an era where the cost of generating plausible content—text, images, video, code—approaches zero. The economic and cognitive barriers that once separated "real" from "fabricated" are collapsing. This isn't a future scenario; it's the present condition.
Dark mode adjustment: Set font-weight: 300 and letter-spacing: 0.01em to compensate for light text on dark background appearing heavier.
Type Scale
| Token | Size | Use |
|---|---|---|
| --text-xs | 0.75rem (12px) | Labels, captions |
| --text-sm | 0.875rem (14px) | Secondary text, buttons |
| --text-base | 1.125rem (18px) | UI text, callouts |
| --text-body | 1.375rem (22px) | Article body |
| --text-lg | 1.5rem (24px) | Lead paragraphs |
| --text-xl | 1.75rem (28px) | Section headers |
| --text-2xl | 2.25rem (36px) | Pullquotes |
| --text-3xl | 3rem (48px) | Page titles |
| --text-4xl | 4rem (64px) | Hero headlines |
| --text-5xl | 5.5rem (88px) | Large hero |
| --text-6xl | 7rem (112px) | Maximum impact |
Traditional Mandarin — Noto Serif TC
Noto Serif TC (思源宋體) pairs with Source Serif 4's warmth and bookish character. Use for Traditional Chinese content.
最有趣的發現往往發生在學科交匯之處
The most interesting discoveries happen where disciplines converge
我們相信，明天重要的工具今天很少顯而易見。它們源於實驗，源於追隨好奇心的線索，沒有預設的目的地。這就是實驗室的工作：在必要之前探索可能性。每一段都應該吸引讀者更深入地閱讀。
ATLAS Meridia 是一個探索人工智慧與創意技術交匯的實驗室。我們在 San Francisco 運營，專注於建構驗證系統、知識管理工具，以及推動思想邊界的解決方案。
實驗室
300 Light
實驗室
400 Regular
實驗室
500 Medium
實驗室
600 SemiBold
Implementation: CJK fonts are large (~4MB). Load only needed weights (300, 400, 500) to minimize file size. For mixed EN/ZH content, let the browser fallback naturally using the combined font stack.
/* CSS Variables */
--font-body-zh: 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;
--font-ui-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
/* Auto-detect Chinese content */
.post-content:lang(zh-Hant),
.post-content:lang(zh-TW) {
font-family: var(--font-body-zh);
font-size: calc(var(--text-body) * 1.05);
line-height: 2;
}
/* For tagged Chinese posts in Ghost */
.tag-chinese .post-content,
.tag-中文 .post-content {
font-family: var(--font-body-zh);
}Spacing
Consistent spacing tokens based on a 4px base unit. Use these variables throughout for predictable rhythm.
| Token | Value | Pixels |
|---|---|---|
| --space-1 | 0.25rem | 4px |
| --space-2 | 0.5rem | 8px |
| --space-3 | 0.75rem | 12px |
| --space-4 | 1rem | 16px |
| --space-5 | 1.5rem | 24px |
| --space-6 | 2rem | 32px |
| --space-8 | 3rem | 48px |
| --space-10 | 4rem | 64px |
| --space-12 | 6rem | 96px |
| --space-16 | 8rem | 128px |
Layout Widths
| Token | Value | Use |
|---|---|---|
| --width-prose | 38rem (~608px) | Article body column |
| --width-wide | 52rem (~832px) | Wide content, images |
| --width-full | 80rem (~1280px) | Max container width |
Components
Reusable UI elements styled consistently across the system.
Body text with a styled link that uses an accent underline and subtle hover state.
Use callouts to highlight important information, key takeaways, or experimental notes that deserve extra attention.
The question isn't whether AI-generated content is "good enough." It's whether we can distinguish what's real.
— Internal observationUse between major sections. The compass icon in accent color at 0.7 opacity.
const verify = async (claim) => {
const methodology = await extractMethodology(claim);
return auditMethodology(methodology);
};Image Treatments
Five image treatments for different editorial contexts. All use 6px border-radius except full-bleed.
Dark mode: Apply filter: brightness(0.92) contrast(1.02) to photos to reduce glare on dark backgrounds.
Ghost Integration
Notes for implementing this design system in Ghost themes and blog posts.
Post Content Styling
Ghost's content API outputs semantic HTML. Target these elements:
.post-content p {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--body-weight);
letter-spacing: var(--body-tracking);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-5);
}
.post-content h2 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
margin-top: var(--space-12);
margin-bottom: var(--space-5);
}
.post-content a {
text-decoration-color: var(--accent);
text-underline-offset: 3px;
}
.post-content blockquote {
/* Use pullquote styling */
border-left: 3px solid var(--accent);
padding-left: var(--space-6);
}
.post-content pre {
background: var(--navy-950);
border: 1px solid var(--navy-800);
}Card Markup
Ghost cards (callout, bookmark, etc.) can be styled with custom classes:
/* Ghost callout card */
.kg-callout-card {
background: linear-gradient(135deg,
rgba(201, 146, 74, 0.08) 0%,
rgba(138, 101, 48, 0.04) 100%);
border: 1px solid rgba(201, 146, 74, 0.2);
border-left: 4px solid var(--accent);
}
/* Ghost image card widths */
.kg-width-wide {
width: calc(100% + 6rem);
margin-left: -3rem;
}
.kg-width-full {
width: 100vw;
margin-left: calc(-50vw + 50%);
}Theme Variables
Include the full token set in your theme's CSS. Ghost supports :root variables. Dark mode can be toggled via:
<html data-theme="dark">
// or
@media (prefers-color-scheme: dark) {
:root { /* dark mode tokens */ }
}Reading Progress Bar
Optional enhancement. 3px height, gradient fill:
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg,
var(--accent) 0%,
var(--accent-light) 100%);
z-index: 1000;
}